<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义加减法</title>
</head>
<style>
    .content {
        margin-top: 20px;
        padding: 10px;
        height: auto;
        width: 900px
    }
  .num {
      display: inline-block;
      height: 36px;
      width: 24px;
      text-align: center;
  }
  .fun {
      border: none;
  }
  .question {
      width: 33%;
      float: left;
      margin-bottom: 80px;
      font-weight: bold;
  }
</style>
<body>
<!--服务配置-->
<div>
  <label class="label-title">
    <h2 class="title-2">混合运算</h2>
  </label>
  <div>
    <div>
      运算类型：
      <label><input name="Fun" type="radio" checked value="1" />加法 </label>
      <label><input name="Fun" type="radio" value="2" />减法 </label>
      <label><input name="Fun" type="radio" value="3" />加减混合 </label>
    </div>
    <div style="margin-top: 10px">
      个数：<input type="number" id="count" value="50"/>
      <button onclick="generate()">一键出题</button>
    </div>
  </div>
  <div class="content" id="content"></div>
</div>
<script type="text/html" id="template">
  <div class="question">
    <div id="num1" class="num">{{num1}}</div>
    <button id="fun1" class="fun">{{fun1}}</button>
    <div id="num2" class="num">{{num2}}</div>
    <button id="fun2" class="fun">{{fun2}}</button>
    <div id="num3" class="num">{{num3}}</div>
    <button class="fun">=</button>
    <input id="result" style="width:30px"/>
  </div>
</script>
<script>

  function generate() {
    var count = document.getElementById('count').value;
    if(count > 100) {
      alert('太多啦，孩子写不完 T_T');
      return false;
    }
    var funType = 1;
    var funTypeEles = document.getElementsByName('Fun');
    for(var i=0;i<funTypeEles.length;i++){
      if(funTypeEles[i].checked){
        funType = i+1;
        break;
      }
    }
    var fun1 = '+';
    var fun2 = '+';
    switch (funType) {
      case 1:
        fun1 = '+';
        fun2 = '+';
        break;
      case 2:
        fun1 = '-';
        fun2 = '-';
        break;
      case 3:
        fun1 = '+';
        fun2 = '-';
        break;
    }

    var _html = '';
    var templateHtml = document.getElementById('template').innerHTML;
    var temCount = 0
    for(var i = 1; i <= 9999; i++ ) {
      var num1 = randomNum(0, 100);
      var num2 = randomNum(0, 100);
      var num3 = randomNum(0, 100);
      var arr = sort(num1, num2, num3)
      var funArr = [fun1, fun2]

      if(arr[0] + arr[1] + arr[2] < 100 || arr[0] - arr[1] - arr[2] > 0) {
        _html += templateHtml
          .replace('{{fun1}}',funArr[randomNum(0,2)])
          .replace('{{fun2}}',funArr[randomNum(0,2)])
          .replace('{{num1}}',arr[0])
          .replace('{{num2}}',arr[1])
          .replace('{{num3}}',arr[2]);
        temCount ++;
        if(temCount == count) {
          break;
        }
      }
    }
    document.getElementById('content').innerHTML = _html;
  }

  function randomNum(min,max) {
    var num = Math.floor(Math.random()*(max-min)) + min
    return num
  }

  function sort(num1, num2, num3) {
    var num4;
    if (num1 < num2) {
      num4 = num1;
      num1 = num2;
      num2 = num4;
    }
    if (num2 < num3) {
      num4 = num2;
      num2 = num3;
      num3 = num4;
    }
    if (num1 < num3) {
      num4 = num1;
      num1 = num3;
      num3 = num4;
    }
    return [num1, num2, num3];
  }

</script>
</body>
</html>
